<script lang="ts" setup>
defineProps({
  mode: {
    type: String,
    default: 'right', // left right
  },
  isClose: {
    type: Boolean,
    default: false,
  },
})
const emit = defineEmits(['changeEvent'])
defineExpose({ showEvent, hideEvent })

const drawerRef = ref(null)

function showEvent() {
  drawerRef.value.open()
}
function hideEvent() {
  drawerRef.value.close()
}
function change(e) {
  emit('changeEvent', e)
}
</script>

<template>
  <uni-drawer ref="drawerRef" :mode="mode" :mask-click="isClose" @change="change($event)">
    <view>
      <slot />
    </view>
  </uni-drawer>
</template>
